<template>
  <div class="api-input">
    <div class="tip rx_no_select">
      <div class="text">列表`描述`字段是否->></div>
      <div class="rx-btn-border btn" :class="{ extend: extend }" @click="onExtend">
        {{ extend ? "关闭" : "展开" }}
      </div>
    </div>
    <table class="api-table">
      <tr class="table-tr table-head">
        <td class="table-td">名称</td>
        <td class="table-td">值</td>
        <template v-if="extend">
          <td class="table-td">类型</td>
          <td class="table-td">必填</td>
          <td class="table-td">描述</td>
          <td class="table-td">版本</td>
        </template>
        <td class="table-td">操作</td>
      </tr>
      <tr
        v-for="(item, index) in apiParams"
        :key="'api-params-' + index"
        class="table-tr"
      >
        <td class="table-td">
          <input type="text" class="ttd-input" v-model="item.name" />
        </td>
        <td class="table-td">
          <input type="text" class="ttd-input" v-model="item.value" />
        </td>
        <template v-if="extend">
          <td class="table-td">
            <div class="type rx_no_select">
              <div class="type-sel">
                <div class="text">{{ item.type ? item.type : "" }}</div>
                <div class="rx-btn-border btn" :class="{extend: typeExtend}" @click.stop="onShowTypeList(index)">{{typeExtend ? '关闭' : '选择'}}</div>
              </div>
              <div :class="getPopClass(index)">
                <div class="content">
                  <div
                    v-for="(t,i) in types"
                    :key="'type-' + i"
                    class="type-option" :class="{select: item.type === t}"
                    @click="onSelType(i)"
                  >
                    <div class="text">{{t}}</div>
                  </div>
                </div>
              </div>
            </div>
          </td>
          <td class="table-td">{{ item.must ? item.must : "否" }}</td>
          <td class="table-td">{{ item.desc ? item.desc : "" }}</td>
          <td class="table-td">{{ item.version ? item.version : "" }}</td>
        </template>
        <td class="table-td">
          <div class="td-btns rx_no_select">
            <!-- <div class="rx-btn-border btn drag">拖拽</div> -->
            <div class="rx-btn-border btn delete" @click="onDeleteTd(index)">删除</div>
          </div>
        </td>
      </tr>
    </table>
    <div class="tip rx_no_select">
      <div class="text">列表:-->></div>
      <div class="rx-btn-border btn extend" @click="onAddTd">添加字段</div>
    </div>
  </div>
</template>

<script>
import ApiEleDis from '../utils/api-element-display'

export default {
  props: {
    params: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      PopClassName: 'api-tb-td-popup',
      PopClassNameUuid: '',
      types: ['int', 'float', 'string', 'array', 'object', 'json'],
      extend: false,
      apiParams: [],

      typeExtend: false,
      typeTempIndex: -1,
    };
  },
  created() {
    const uuid = Math.random().toString(36).substring(3, 8)
    this.PopClassNameUuid = this.PopClassName + uuid
    const apiParams = []
    const params = JSON.parse(JSON.stringify(this.params))
    const len = params.length
    for (let i = 0; i < len; i++) {
      const p = params[i] || {}
      const value = p.value || ''
      const type = p.type
      if (!type) {
        p.type = 'string'
      }else if (type && (type === 'array' || type === 'object')) {
        p.value = JSON.stringify(value)
      }
      apiParams.push(p)
    }
    this.apiParams = apiParams
  },
  mounted() {
    const _this = this;
    document.onclick = function (e) {
      _this.setElementStyleDisplay(_this.PopClassName, false, e)
    };
  },
  methods: {
    getPopClass(index) {
      const PopClassNameUuid = this.PopClassNameUuid
      const PopClassName = this.PopClassName
      const className = {}
      className[PopClassNameUuid] = true
      className[PopClassName] = true
      className['pop' +index] = true
      return className
    },
    onExtend() {
      this.extend = !this.extend
    },
    onShowTypeList(index) {
      const show = !this.typeExtend
      this.setElementStyleDisplay(this.PopClassName, false)
      let className = 'pop'
      if (show) {
        this.typeTempIndex = index
        className += index
        const classNames = []
        classNames.push(this.PopClassNameUuid)
        classNames.push(className)
        ApiEleDis.elementIncludeClassDisplay({classNames, show})
      } else {
        this.typeTempIndex = -1
      }
    },
    onSelType(i) {
      const list = this.types
      const apiParams = this.apiParams
      if (i < list.length) {
        const type = list[i] || ''
        const index = this.typeTempIndex
        if (index < apiParams.length) {
          const p = apiParams[index]
          p.type = type
          this.apiParams.splice(index, 1, p)
        }
      }
      this.setElementStyleDisplay('api-tb-td-popup', false)
    },
    onDeleteTd(index) {
      this.apiParams.splice(index, 1)
    },
    onAddTd() {
      const td = {
        name: '',
        value: '',
        type: 'string',
        must: '否',
        desc: '临时字段',
        enable: true,
      };
      this.apiParams.push(td);
    },
    setElementStyleDisplay(className, show = false, e = null) {
      ApiEleDis.elementArrayDisplay({e, className, show, breakClass: 'api-tb-td-popup'})
    }
  },
};
</script>

<style src="../css-component/style.css"></style>
<style scoped>
.api-input {
  display: flex;
  flex-direction: column;
}

.api-input .tip {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.api-input .tip .text {
  font-size: 14px;
  color: var(--color-gray);
  margin: 0 10px;
}

.api-input .btn.extend {
  background-color: var(--color-blue);
}

.api-table {
  overflow: visible;
}

.api-table .ttd-input {
  height: 25px;
  border: 1px solid var(--color-gray);
  border-radius: 3px;
  padding: 0 5px;
  min-width: 120px;
  max-width: 130px;
}

.api-table .td-btns {
  display: flex;
  align-items: center;
}

.api-table .table-td .type {
  position: relative;
}
.api-table .table-td .type .type-sel {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.api-table .table-td .type .type-sel .btn {
  margin-left: 5px;
  font-size: 12px;
}

.api-table .table-td .td-btns .drag {
  font-size: 12px;
  background-color: rgb(158, 95, 126);
}
.api-table .table-td .td-btns .delete {
  font-size: 12px;
  margin-left: 10px;
  background-color: lightslategray;
}

.api-tb-td-popup {
  display: none;
  position: absolute;
  left: -10px;;
  top: 35px;
  width: 100px;
  padding: 5px;
  background-color: #eee;
  border-radius: 4px;
  box-shadow: 0px 1px 6px 0px rgba(244, 244, 158, 0.4);
  z-index: 10;
}
.api-tb-td-popup .content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.api-tb-td-popup .content .type-option {
  margin: 4px 8px;
  border-width: 1px;
  border: 1px solid rgb(211, 156, 238);
  border-radius: 4px;
  padding: 3px 15px 3px 3px;
  color: black;
}
.api-tb-td-popup .content .type-option.select {
  border-color: salmon;
  color: red;
}

.api-tb-td-popup .content .type-option.text {
  height: 20px;
}

</style>